import React, { Component } from 'react';
import { FormControl, Button, Table, Radio} from 'tinper-bee';
import { workFileSearchAddGroupList, workFileSearchAddGroupListNew } from './workarchives.config.js';
import './MemberModalContent.less';
import moment from 'moment';
moment.locale('zh-cn');

export default class MemberModalContent extends Component {
	constructor (props){
		super(props);
		this.state = {
			memberText: '',
			data: this.props.data,
			roleName: '',
			tableData: [],
			chooseItemArray: [],
			pageNum:this.props.isUseNewTeam ?0:1,
			isUseNewTeam : this.props.isUseNewTeam

		}
	}
	componentDidMount () {
		this.getComputedRoleName();
		this.handlerSearchMember();
	}
	getColumns = () => {
		let _me = this;
		if(_me.state.isUseNewTeam){
			return [
				{ title: '',
			      dataIndex: 'userId',
			      key: 'userId',
			      width: 50,
			      className: 'center',
			      render (text,rec,index) {
	      			 return <input type="checkbox" onClick = { _me.checkGroupItem(text,rec,index)} />
	      			}
	      		},
			 	{ title: "姓名", dataIndex: "sname", key: "sname", width:'20%'},
			    { title: "电话", dataIndex: "phone", key: "phone", width:'40%'},
			    { title: "邮箱", dataIndex: "email", key: "email", width:'40%'}
	   		]
		}else{
			return [
				{ title: '',
			      dataIndex: 'userId',
			      key: 'userId',
			      width: 50,
			      className: 'center',
			      render (text,rec,index) {
	      			 return <input type="checkbox" onClick = { _me.checkGroupItem(text,rec,index)} />
	      			}
	      		},
			 	{ title: "姓名", dataIndex: "userName", key: "userName", width:'20%'},
			    { title: "电话", dataIndex: "userMobile", key: "userMobile", width:'40%'},
			    { title: "邮箱", dataIndex: "userEmail", key: "userEmail", width:'40%'}
	   		]
		}
	
	}
	checkGroupItem = (text,rec,index)=>()=>{
		let chooseItemArray = this.state.chooseItemArray;
		let saveMemberItem = this.props.saveMemberItem;
		if(this.state.isUseNewTeam){
			rec['pkEnterprise'] = this.state.data.pkEnterprise;
			rec['pkUser'] = rec.userId;
			rec['email'] = rec.email;
			rec['phoneNo'] = rec.phone;
		}else{
			rec['pkEnterprise'] = this.state.data.pkEnterprise;
			rec['pkUser'] = rec.userId;
			rec['email'] = rec.userEmail;
			rec['phoneNo'] = rec.userMobile;
		}
		

		if(!this.findInArray(chooseItemArray, rec)){
			chooseItemArray.push(rec)
		}

		this.setState({
			chooseItemArray
		});
		if(saveMemberItem){
			saveMemberItem(chooseItemArray)
		}
	}
	findInArray = (data, item) => {
		for(let i = 0;i <data.length;i++){
			if(data[i]['userId'] === item['userId']){
				data.splice(i, 1);
				return true
			}
		}
		return false;
	}
	getComputedRoleName = ()=>{
		let text = '';
		switch(this.props.data.role){
			case '10':
			text = '业主方';
			break;
			case '20':
			text = '施工方';
			break;
			case '30':
			text = '监理方';
			break;
			case '40':
			text = '设计方';
			break;
			case '50':
			text = '客户方';
			break;
		}
		this.setState({
			roleName: text
		});
	}
	onRowClick = (record, index, event)=>{
	}
	handlerSaveMember = (e)=>{
		let value = e.target.value;
		this.setState({
			memberText: value
		});
	}
	handlerSearchMember = (initNumFlag)=>{
		if (initNumFlag) {
			this.setState({
				pageNum: this.props.isUseNewTeam ?0:1,
				tableData: []
			},()=>{
				this.handlerGetMemberList();
			});
		} else {
			this.handlerGetMemberList();
		}
	}
	handlerGetMemberList = () => {
		let excludeUser = [];
		this.props.hasChooseMemberData.forEach((item, index)=>{
			if (item.pkUser) {
				excludeUser.push(item['pkUser']);
			} else if (item.userId) {
				excludeUser.push(item['userId']);
			}
		})
		let param = {
			'keyword': this.state.memberText,
			'enterid': this.state.data.pkEnterprise,
			'pageNum': this.state.pageNum,
			'pageSize': 200,
			'isAjax': 1,
			'ieStamp': new Date().getTime(),
			'excludeUser': excludeUser
		};

		if(this.state.isUseNewTeam){
			delete param["enterid"];
			param["pkEnterprises"] =[ this.state.data.pkEnterprise];
			param["excludeUsers"] = excludeUser;
			workFileSearchAddGroupListNew(param).then((res)=>{
				if (res.data.resultCode != 'busi_ex') {
					let data = res.data.result.objects;
					data.forEach((item)=>{
						item['key'] = item['userId'];
					
					})
					this.setState({
						tableData: [...this.state.tableData, ...data]
					})
				}else{
					danger({'text': res.data.exMsg})
				}
			})
		}else{
			workFileSearchAddGroupList(param,
				res=>{
					let data = res.data.result.content;
					data.forEach((item)=>{
						item['key'] = item['userId'];
					})
					this.setState({
						tableData: [...this.state.tableData, ...data]
					});
				},
				error=>{}
			)
		}
		
	}
	handlerSearchMore = () => {
		let pageNum = this.state.pageNum;
		++pageNum;
		this.setState({
			pageNum:　pageNum
		},() => {
			this.handlerSearchMember(false);
		});
	}
	render (){
		return (
			<div className="manager--list">
				<div className="list--header clearfix">
					<div className="search-group clearfix">
						<FormControl size="lg" placeholder={`请输入姓名、电话、邮箱名称`} onChange={this.handlerSaveMember} value={this.state.memberText}/>
						<Button colors="primary" className="search-btn" onClick={()=>this.handlerSearchMember(true)}>搜索</Button>
					</div>
				</div>
				<div className="list--content">
					<p className="T--title">
						{this.state.roleName}：{this.state.data.defaultEntName}
					</p>
					<Table data={this.state.tableData} columns={this.getColumns()} onRowClick= {this.onRowClick} scroll={{ y: 500 }}/>
					<a href="javascript:;" className="search-more" onClick={this.handlerSearchMore}>查看更多数据</a>
				</div>
			</div>
			)
	}
}